<template>
    <div>
        <div style="display: flex;justify-content: space-between;">
             <div>
               <!-- clearable：让搜索框有个X，可以清除数据 -->
               <el-input v-model="keyword" clearable @clear="initEmps" @keydown.enter.native="initEmps" placeholder="请输入员工名进行搜索，可以直接回车搜素..." prefix-icon="el-icon-search"
               style="width: 350px;margin-right: 10px;" :disabled="showAdvanceSearchView"> 
               </el-input>
               <el-button icon="el-icon-search" type="primary" :disabled="showAdvanceSearchView" @click="initEmps">搜索</el-button>
               <el-button type="primary" @click="showAdvanceSearchView = !showAdvanceSearchView">
                <i :class="showAdvanceSearchView?'fa fa-angle-double-up':'fa fa-angle-double-down'"
                   aria-hidden="true"></i>
                高级搜索
            </el-button>

             </div>
             <div>
               <!--  :show-file-list="false"不展示上传列表 -->
              <el-upload 
                  :show-file-list="false"
                  :before-upload="beforeUpload"
                  :on-success="onSuccess"
                  :on-error="onError"
                  :disabled="importDataDisabled"
                  style="display: inline-flex; margin-right: 8px;"
                  action="/employee/basic/import">
                  <el-button :disabled="importDataDisabled" type="success" :icon="importDataBtnIcon">
                    {{importDataBtnText}}
                   </el-button> 
               </el-upload>
               <el-button type="success" @click="exportData" icon="el-icon-download">
                导出数据
               </el-button>
               <el-button type="success" icon="el-icon-plus" @click="showAddEmpView">
                 添加用户
               </el-button>
             </div>
        </div>

        <transition name="slide-fade">
            <div v-show="showAdvanceSearchView"
                style="border: 1px solid #409eff;border-radius: 5px;box-sizing: border-box;padding: 5px;margin: 10px 0px;">
                <el-row>
                    <el-col :span="5">
                        政治面貌:
                        <el-select v-model="searchValue.politicId" placeholder="政治面貌" size="mini"
                                  style="width: 130px;">
                            <el-option
                                    v-for="item in politicsstatus"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        民族:
                        <el-select v-model="searchValue.nationId" placeholder="民族" size="mini"
                                  style="width: 130px;">
                            <el-option
                                    v-for="item in nations"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        职位:
                        <el-select v-model="searchValue.posId" placeholder="职位" size="mini" style="width: 130px;">
                            <el-option
                                    v-for="item in positions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        职称:
                        <el-select v-model="searchValue.jobLevelId" placeholder="职称" size="mini"
                                  style="width: 130px;">
                            <el-option
                                    v-for="item in joblevels"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="7">
                        聘用形式:
                        <el-radio-group v-model="searchValue.engageForm">
                            <el-radio label="劳动合同">劳动合同</el-radio>
                            <el-radio label="劳务合同">劳务合同</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="5">
                        所属部门:
                        <el-popover
                                placement="right"
                                title="请选择部门"
                                width="200"
                                trigger="manual"
                                v-model="popVisible2">
                            <el-tree default-expand-all :data="allDeps" :props="defaultProps"
                                    @node-click="searvhViewHandleNodeClick"></el-tree>
                            <div slot="reference"
                                style="width: 130px;display: inline-flex;font-size: 13px;border: 1px solid #dedede;height: 26px;border-radius: 5px;cursor: pointer;align-items: center;padding-left: 8px;box-sizing: border-box;margin-left: 3px"
                                @click="showDepView2">{{inputDepName}}
                            </div>
                        </el-popover>
                    </el-col>
                    <el-col :span="10">
                        入职日期:
                        <el-date-picker
                                v-model="searchValue.beginDateScope"
                                type="daterange"
                                size="mini"
                                unlink-panels
                                value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="5" :offset="4">
                        <el-button size="mini">取消</el-button>
                        <el-button size="mini" icon="el-icon-search" type="primary" @click="initEmps('advanced')">搜索</el-button>
                    </el-col>
                </el-row>
            </div>
        </transition>


        <div style="margin-top: 10px;">
          <!-- stripe斑马纹  border边框-->
            <el-table
                :data="emps"
                stripe
                border
                v-loading="loading"
                element-loading-text="正在加载数据..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                style="width: 100%">
              <!-- 多选框 -->
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <!-- fixed表示固定这一列    align="left" 表示文本向左-->
              <el-table-column prop="name"  fixed align="left" label="姓名" width="90"></el-table-column>
              <el-table-column prop="workID" label="工号"  width="80"></el-table-column>
              <el-table-column prop="gender"   label="性别"   align="left"   width="85"></el-table-column>
              <el-table-column prop="birthday"  width="95" align="left" label="出生日期"></el-table-column>
              <el-table-column prop="idCard"  width="150" align="left"  label="身份证号码"></el-table-column>
              <el-table-column prop="wedlock"  width="70"   label="婚姻状况"></el-table-column>
              <el-table-column prop="nation.name"  width="50"  label="民族"></el-table-column>
              <el-table-column prop="nativePlace"  width="80"  label="籍贯"></el-table-column>
              <el-table-column prop="politicsstatus.name"   label="政治面貌"></el-table-column>
              <el-table-column prop="email"  width="180" align="left"  label="电子邮箱"></el-table-column>
              <el-table-column prop="phone"  width="100" align="left"  label="电话号码"></el-table-column>
              <el-table-column prop="address"  width="220" align="left"  label="联系地址"></el-table-column>
              <el-table-column prop="department.name"  width="100" align="left"  label="所属部门"></el-table-column>
              <el-table-column prop="position.name"  width="100"  label="职位"></el-table-column>
              <el-table-column prop="jobLevel.name"  width="100"  label="职称"></el-table-column>
              <el-table-column prop="engageForm"  width="100" align="left"  label="聘用形式"></el-table-column>
              <el-table-column prop="tiptopDegree"   width="80"   align="left"  label="最高学历"></el-table-column>
              <el-table-column prop="specialty" width="150"  align="left" label="专业"></el-table-column>
              <el-table-column prop="school" width="150" align="left" label="毕业院校"></el-table-column>
              <el-table-column prop="beginDate"  width="95" align="left"  label="入职日期"></el-table-column>
              <el-table-column prop="conversionTime"  width="95" align="left"  label="转正日期"></el-table-column>
              <el-table-column prop="beginContract"  width="95" align="left"  label="合同起始日期"></el-table-column>
              <el-table-column prop="endContract"  width="95" align="left"  label="合同终止日期"></el-table-column>
              <el-table-column 
                width="100" 
                align="left" 
                label="合同期限">
                <template slot-scope="scope">
                  <el-tag>{{scope.row.contractTerm}}</el-tag>年
                </template>
                </el-table-column>
              <el-table-column prop="tiptopDegree"  label="最高学历"></el-table-column>
              <el-table-column 
                  fixed="right"
                  width="200"
                  label="操作">
                <template slot-scope="scope">
                  <el-button @click="showEditEmpView(scope.row)" style="padding: 3px;" size="mini">编辑</el-button>
                  <el-button style="padding: 3px;" size="mini" type="primary">查看高级资料</el-button>
                  <el-button @click="deleteEmp(scope.row)" style="padding: 3px;" size="mini" type="danger">删除</el-button>
                </template>
              </el-table-column>
           </el-table>
           <div style="display: flex; justify-content: flex-end;">
              <el-pagination
                background
                @current-change="currentChange"
                @size-change="sizeChange"
                layout="sizes, prev, pager, next, jumper, ->, total, slot"
                :total="total">
              </el-pagination>
           </div>
        </div>

        <!-- 对话框 -->
        <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="80%">
          <div>
            <!-- ref是取别名，表单检验时用 -->
             <el-form :model="emp" :rules="rules" ref="empForm">
               <el-row>
                 <el-col :span="6">
                   <!-- prop属性是用来表单校验的 -->
                   <el-form-item label="姓名:" prop="name">
                     <el-input v-model="emp.name" placeholder="请输入员工姓名" size="mini" style="width: 150px;" prefix-icon="el-icon-edit"></el-input>
                   </el-form-item>
                 </el-col>
                 <el-col :span="5">
                   <el-form-item label="性别:" prop="gender">
                     <el-radio-group v-model="emp.gender">
                       <el-radio label="男">男</el-radio>
                       <el-radio label="女" style="margin-left: 5px;">女</el-radio>
                     </el-radio-group>
                   </el-form-item>
                 </el-col>
                 <el-col :span="6">
                   <el-form-item label="出生日期:" prop="birthday">
                     <!--  value-format="yyyy-MM-dd" 提交给后端的格式 -->
                      <el-date-picker
                        v-model="emp.birthday"
                        type="date"
                        size="mini"
                        style="width: 150px;"
                        value-format="yyyy-MM-dd"
                        placeholder="出生日期">
                      </el-date-picker>
                   </el-form-item>
                 </el-col>
                 <el-col :span="7">
                  <el-form-item label="政治面貌:" prop="politicId">
                    <el-select v-model="emp.politicId" placeholder="政治面貌" size="mini" style="width: 200px;">
                      <el-option
                          v-for="item in politicsstatus"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                  </el-form-item>
                </el-col>
               </el-row>

               <el-row>
                  <el-col :span="6">
                    <el-form-item label="民族:" prop="nationId">
                      <el-select v-model="emp.politicId" placeholder="政治面貌" size="mini" style="width: 150px;">
                        <el-option
                            v-for="item in nations"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                          </el-option>
                        </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item label="籍贯:" prop="nativePlace">
                      <el-input v-model="emp.nativePlace" placeholder="请输入籍贯" size="mini" style="width: 120px;" prefix-icon="el-icon-edit"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="电子邮箱:" prop="email">
                      <el-input v-model="emp.email" placeholder="请输入电子邮箱" size="mini" style="width: 150px;" prefix-icon="el-icon-message"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="7">
                    <el-form-item label="联系地址:" prop="address">
                      <el-input v-model="emp.address" placeholder="请输入联系地址" size="mini" style="width: 200px;" prefix-icon="el-icon-edit"></el-input>
                    </el-form-item>
                  </el-col>
               </el-row>

               <el-row>
                  <el-col :span="6">
                    <el-form-item label="职位:" prop="posId">
                      <el-select v-model="emp.posId" placeholder="请选择职位" size="mini" style="width: 150px;">
                        <el-option
                            v-for="item in positions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                          </el-option>
                        </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item label="职称:" prop="jobLevelId">
                      <el-select v-model="emp.jobLevelId" placeholder="请选择职称" size="mini" style="width: 150px;">
                        <el-option
                            v-for="item in joblevels"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                          </el-option>
                        </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="所属部门:" prop="departmentId">
                      <el-popover
                        placement="right"
                        title="请选择部门"
                        width="200"
                        trigger="manual"
                        v-model="popVisible">
                        <!--  default-expand-all默认展示所有节点 -->
                      <el-tree default-expand-all :data="allDeps" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                      <div slot="reference" style="width: 150px;display: inline-flex;font-size: 13px;border: 1px solid #dedede;height: 26px;border-radius: 5px;
                      cursor: pointer; align-items: center; padding-left: 8px; box-sizing: border-box;" @click="showDepView">
                         {{inputDepName}}
                      </div>
                    </el-popover>
                    
                    
                    </el-form-item>
                  </el-col>
                  <el-col :span="7">
                    <el-form-item label="电话号码:" prop="phone">
                      <el-input v-model="emp.phone" placeholder="请输入电话号码" size="mini" style="width: 200px;" prefix-icon="el-icon-phone"></el-input>
                    </el-form-item>
                  </el-col>
               </el-row>

               <el-row>
                <el-col :span="6">
                  <el-form-item label="工号:" prop="workID">
                    <el-input v-model="emp.workID" placeholder="工号" size="mini" disabled style="width: 150px;" prefix-icon="el-icon-edit"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="学历:" prop="tiptopDegree">
                    <el-select v-model="emp.tiptopDegree" placeholder="请选择学历" size="mini" style="width: 150px;">
                      <el-option
                          v-for="item in tiptopDegrees"
                          :key="item"
                          :label="item"
                          :value="item">
                        </el-option>
                      </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="毕业院校:" prop="school">
                    <el-input v-model="emp.school" placeholder="请输入毕业院校" size="mini" style="width: 150px;" prefix-icon="el-icon-edit"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="专业名称:" prop="specialty">
                    <el-input v-model="emp.specialty" placeholder="请输入专业名称" size="mini" style="width: 200px;" prefix-icon="el-icon-edit"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="6">
                  <el-form-item label="入职日期:" prop="beginDate">
                    <!--  value-format="yyyy-MM-dd" 提交给后端的格式 -->
                     <el-date-picker
                       v-model="emp.beginDate"
                       type="date"
                       size="mini"
                       style="width: 130px;"
                       value-format="yyyy-MM-dd"
                       placeholder="入职日期">
                     </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="转正日期:" prop="conversionTime">
                    <!--  value-format="yyyy-MM-dd" 提交给后端的格式 -->
                     <el-date-picker
                       v-model="emp.conversionTime"
                       type="date"
                       size="mini"
                       style="width: 130px;"
                       value-format="yyyy-MM-dd"
                       placeholder="转正日期">
                     </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="合同起始日期:" prop="beginContract">
                    <!--  value-format="yyyy-MM-dd" 提交给后端的格式 -->
                     <el-date-picker
                       v-model="emp.beginContract"
                       type="date"
                       size="mini"
                       style="width: 150px;"
                       value-format="yyyy-MM-dd"
                       placeholder="合同起始日期">
                     </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="合同终止日期:" prop="endContract">
                    <!--  value-format="yyyy-MM-dd" 提交给后端的格式 -->
                     <el-date-picker
                       v-model="emp.endContract"
                       type="date"
                       size="mini"
                       style="width: 150px;"
                       value-format="yyyy-MM-dd"
                       placeholder="合同终止日期">
                     </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="8">
                  <el-form-item label="身份证号码:" prop="idCard">
                    <el-input v-model="emp.idCard" placeholder="请输入身份证号码" size="mini" style="width: 180px;" prefix-icon="el-icon-edit"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="合同:" prop="engageForm">
                    <el-radio-group v-model="emp.engageForm">
                      <el-radio label="劳动合同">劳动合同</el-radio>
                      <el-radio label="劳务合同">劳务合同</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="婚姻状况:" prop="wedlock">
                    <el-radio-group v-model="emp.wedlock">
                      <el-radio label="已婚">已婚</el-radio>
                      <el-radio label="未婚">未婚</el-radio>
                      <el-radio label="离异">离异</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>



             </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="doAddEmp">确 定</el-button>
          </span>
        </el-dialog>
    </div>
  </template>
  
  <script>
    export default{
      data() {
        return {
          searchValue: {  //高级搜索绑定的值
              politicId: null,
              nationId: null,
              jobLevelId: null,
              posId: null,
              engageForm: null,
              departmentId: null,
              beginDateScope: null
          },
          importDataBtnText: '导入数据',
          importDataBtnIcon: 'el-icon-upload2',
          importDataDisabled: false, //上传过程中禁止再上传
          showAdvanceSearchView: false, //高级搜索框
          title:'', //对话框的标题
          emps:[],  //员工数据
          loading: false,  //加载提示
          popVisible: false, //添加时展示的选择部门对话框
          popVisible2: false,
          allDeps: [], //添加是展示的所有部门
          total: 0, //总数量
          page: 1, //页数
          size: 10, //每页大小
          keyword: '', //搜索绑定的值
          dialogVisible: false, //对话框
          inputDepName: '所属部门', //添加时选中的部门值
          nations: [], //民族
          joblevels: [], //职称
          politicsstatus: [], //政治面貌
          positions: [], //职位
          tiptopDegrees: ['本科','大专','硕士','博士','高中','初中','小学','其他'], //学历
          defaultProps: { //添加时的部门树
            children: 'children',
            label: 'name'
          },
          value: '', //下拉框绑定的值
          emp:{  //添加员工的数据
            name:'mmm',
            gender: '男',
            birthday:'1989-12-31',
            idCard:'610122199001011256',
            wedlock: "已婚",
            nationId: 1,
            nativePlace: "陕西",
            politicId: 13,
            email: "laowang@qq.com",
            phone: "18565558897",
            address: "深圳市南山区",
            departmentId: null,
            jobLevelId: 9,
            posId: 29,
            engageForm: "劳务合同",
            tiptopDegree: "本科",
            specialty: "信息管理与信息系统",
            school: "深圳大学",
            beginDate: "2017-12-31",
            // workState: "在职",
            workID: "00000001",
            contractTerm: 2.0,
            conversionTime: "2018-03-31",
            notWorkDate: null,
            beginContract: "2017-12-31",
            endContract: "2019-12-31",
            workAge: null,
          }, 
          rules:{
              //required:true:用户名必填  如果没填就弹出““””“"请输入用户名",trigger:blur 触发的方式是blur
              name:[{required:true,message:"用户名不能为空",trigger:"blur"}],
              gender:[{required:true,message:"性别不能为空",trigger:"blur"}],
              birthday:[{required:true,message:"出生日期不能为空",trigger:"blur"}],
              idCard: [{required: true, message: '请输入身份证号码', trigger: 'blur'}, {
                  pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
                  message: '身份证号码格式不正确',
                  trigger: 'blur'
              }],
              wedlock:[{required:true,message:"婚姻状况不能为空",trigger:"blur"}],
              nationId:[{required:true,message:"民族不能为空",trigger:"blur"}],
              nativePlace:[{required:true,message:"籍贯不能为空",trigger:"blur"}],
              politicId:[{required:true,message:"政治面貌不能为空",trigger:"blur"}],
              email:[{required:true,message:"邮箱地址不能为空",trigger:"blur"},{
                type: 'email',
                message:'邮箱格式不正确',
                trigger: 'blur'
              }],
              phone:[{required:true,message:"电话号码不能为空",trigger:"blur"}],
              address:[{required:true,message:"员工地址不能为空",trigger:"blur"}],
              departmentId:[{required:true,message:"部门名称不能为空",trigger:"blur"}],
              jobLevelId:[{required:true,message:"职称不能为空",trigger:"blur"}],
              posId:[{required:true,message:"职位不能为空",trigger:"blur"}],
              engageForm:[{required:true,message:"聘用形式不能为空",trigger:"blur"}],
              tiptopDegree:[{required:true,message:"学历不能为空",trigger:"blur"}],
              specialty:[{required:true,message:"专业不能为空",trigger:"blur"}],
              school:[{required:true,message:"毕业院校不能为空",trigger:"blur"}],
              beginDate:[{required:true,message:"入职日期不能为空",trigger:"blur"}],
              workState:[{required:true,message:"工作状态不能为空",trigger:"blur"}],
              workID:[{required:true,message:"工号不能为空",trigger:"blur"}],
              contractTerm:[{required:true,message:"合同期限不能为空",trigger:"blur"}],
              conversionTime:[{required:true,message:"转正日期不能为空",trigger:"blur"}],
              notWorkDate:[{required:true,message:"离职日期不能为空",trigger:"blur"}],
              beginContract:[{required:true,message:"合同起始日期不能为空",trigger:"blur"}],
              endContract:[{required:true,message:"合同结束日期不能为空",trigger:"blur"}],
              workAge:[{required:true,message:"工龄不能为空",trigger:"blur"}],
          },
        }
      },
      mounted() {
        this.initEmps(); //获取员工数据
        this.initData(); //获取各个下拉框的值：民族、职称、政治面貌
        this.initPositions() //调用该方法获取所有职位
      },
      methods: {
        //关闭高级搜索的部门对话框
        showDepView2() {
            this.popVisible2 = !this.popVisible2
        },
        //高级搜索中的所属部门
        searvhViewHandleNodeClick(data) { 
            this.inputDepName = data.name;
            this.searchValue.departmentId = data.id;
            this.popVisible2 = !this.popVisible2
        },
        //文件上传失败时
        onError(err, file, fileList) {
            this.importDataBtnText = '导入数据';
            this.importDataBtnIcon = 'el-icon-upload2';
            this.importDataDisabled = false;
        },
        //文件上传成功时
        onSuccess(response, file, fileList) {
            this.importDataBtnText = '导入数据';
            this.importDataBtnIcon = 'el-icon-upload2';
            this.importDataDisabled = false;
            this.initEmps();
        },
        //文件上传时
        beforeUpload() {
            this.importDataBtnText = '正在导入';
            this.importDataBtnIcon = 'el-icon-loading';
            this.importDataDisabled = true;
        },
        // Excel导出员工数据
        exportData(){
          window.open("/employee/basic/export",'_parent');
        },
        // 置空员工信息
        emptyEmp() {
            this.emp = {
                name: "",
                gender: "",
                birthday: "",
                idCard: "",
                wedlock: "",
                nationId: 1,
                nativePlace: "",
                politicId: 13,
                email: "",
                phone: "",
                address: "",
                departmentId: null,
                jobLevelId: 9,
                posId: 29,
                engageForm: "",
                tiptopDegree: "",
                specialty: "",
                school: "",
                beginDate: "",
                workID: "",
                contractTerm: 2,
                conversionTime: "",
                notworkDate: null,
                beginContract: "",
                endContract: "",
                workAge: null
            }
            this.inputDepName = '';
        },

        //展示编辑员工
        showEditEmpView(data) {
            this.initPositions();
            this.title = '编辑员工信息';
            this.emp = data;
            this.inputDepName = data.department.name;
            this.dialogVisible = true;
        },
        //删除员工
         deleteEmp(data) {
            this.$confirm('此操作将永久删除【' + data.name + '】, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest("/employee/basic/" + data.id).then(resp => {
                    if (resp) {
                        this.initEmps(); //刷新数据
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 添加部门
        doAddEmp() {
            if (this.emp.id) {
                this.$refs['empForm'].validate(valid => {//表单校验
                    if (valid) {
                        this.putRequest("/employee/basic/", this.emp).then(resp => {
                            if (resp) {
                                this.dialogVisible = false;//关闭对话框
                                this.initEmps();//刷新数据
                            }
                        })
                    }
                });
            } else {
                this.$refs['empForm'].validate(valid => {//表单校验
                    if (valid) {
                        this.postRequest("/employee/basic/", this.emp).then(resp => {
                            if (resp) {
                                this.dialogVisible = false;//关闭对话框
                                this.initEmps();//刷新数据
                            } 
                        })
                    }
                });
            }
        },
        //展示树
        handleNodeClick(data) { 
          this.inputDepName = data.name //点击树节点时赋值给文本框然后展示出来
          this.emp.departmentId = data.id // 赋值部门id
          this.popVisible = !this.popVisible //选择中关闭部门对话框
        },
        //部门对话框
        showDepView(){
          this.popVisible = !this.popVisible  //关闭部门对话框
        },
         //获取当前最大的工号
        getMaxWordID(){
          this.getRequest('/employee/basic/maxWorkID').then(resp=>{
            if(resp){
              this.emp.workID = resp.obj
            }
          })
        },
        //获取所有职位
        initPositions(){
          this.getRequest('/employee/basic/positions').then(resp=>{
              if(resp){
                this.positions = resp
              }
            })
        },
        // 加载下拉框的值
        initData(){
          //民族
          if(!window.sessionStorage.getItem("nations")){
            this.getRequest('/employee/basic/nations').then(resp=>{
              if(resp){
                this.nations = resp
                //把查到的nations数据存入sessionStorage中
                window.sessionStorage.setItem("nations", JSON.stringify(resp)) 
              }
            })
          }else{
            this.nations = JSON.parse(window.sessionStorage.getItem("nations"))
          }
          //职称
          if(!window.sessionStorage.getItem("joblevels")){
            this.getRequest('/employee/basic/joblevels').then(resp=>{         
              if(resp){
                this.joblevels = resp
                 //把查到的joblevels数据存入sessionStorage中
                 window.sessionStorage.setItem("joblevels", JSON.stringify(resp)) 
              }
            })
          }else{
            this.joblevels = JSON.parse(window.sessionStorage.getItem("joblevels"))
          }
          //政治面貌
          if(!window.sessionStorage.getItem("politicsstatus")){
            this.getRequest('/employee/basic/politicsstatus').then(resp=>{
              if(resp){
                this.politicsstatus = resp
                 //把查到的politicsstatus数据存入sessionStorage中
                 window.sessionStorage.setItem("politicsstatus", JSON.stringify(resp)) 
              }
            })
          }else{
            this.politicsstatus = JSON.parse(window.sessionStorage.getItem("politicsstatus"))
          }
          //部门
          if(!window.sessionStorage.getItem("deps")){
          this.getRequest('/employee/basic/deps').then(resp=>{
            if(resp){
              this.allDeps = resp
                //把查到的deps数据存入sessionStorage中
                window.sessionStorage.setItem("deps", JSON.stringify(resp)) 
            }
          })
          }else{
            this.allDeps = JSON.parse(window.sessionStorage.getItem("deps"))
          }
        },
        // 显示添加员工对话框
        showAddEmpView(){
           this.emptyEmp() //置空表单
           this.title = '添加员工'
           this.dialogVisible = true
           this. getMaxWordID() //查询工号
        },
        //展示页面大小
        sizeChange(currentSize){
            this.size = currentSize
            this.initEmps()
        },
        //分页  参数currentPage是当前页
        currentChange(currentPage){
            this.page = currentPage  //赋值
            this.initEmps()  //刷新数据
        },
        //获取员工数据
        // initEmps(){
        //   this.loading = true
        //   this.getRequest("/employee/basic/?page=" + this.page + "&size=" + this.size + "&keyword=" + this.keyword).then(resp=>{
        //     this.loading = false
        //     console.log(resp)
        //     if(resp){
        //       this.emps = resp.data  
        //       this.total = resp.total
        //     }
        //   })
        // }
        initEmps(type) {
                this.loading = true;
                let url = '/employee/basic/?page=' + this.page + '&size=' + this.size;
                //如果是高级搜索
                if (type && type == 'advanced') { 
                    if (this.searchValue.politicId) {
                        url += '&politicId=' + this.searchValue.politicId;
                    }
                    if (this.searchValue.nationId) {
                        url += '&nationId=' + this.searchValue.nationId;
                    }
                    if (this.searchValue.jobLevelId) {
                        url += '&jobLevelId=' + this.searchValue.jobLevelId;
                    }
                    if (this.searchValue.posId) {
                        url += '&posId=' + this.searchValue.posId;
                    }
                    if (this.searchValue.engageForm) {
                        url += '&engageForm=' + this.searchValue.engageForm;
                    }
                    if (this.searchValue.departmentId) {
                        url += '&departmentId=' + this.searchValue.departmentId;
                    }
                    if (this.searchValue.beginDateScope) {
                        url += '&beginDateScope=' + this.searchValue.beginDateScope;
                    }
                } else {  //普通搜索
                    url += "&name=" + this.keyword;
                }
                this.getRequest(url).then(resp => {
                    this.loading = false;
                    if (resp) {
                        this.emps = resp.data;
                        this.total = resp.total;
                    }
                });
            }

      },
    }
  </script>
  
  <style scoped>
      /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .8s ease;
    }

    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */
    {
        transform: translateX(10px);
        opacity: 0;
    }

  </style>
  